<template>
  <div>
     <!-- 头部搜索栏 -->
     <div class="head">
    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      />
      <van-tabs v-model="active" swipeable @click="onClick" sticky>
        <van-tab v-for="index in type" :name="index.cateid" :title="index.typename">
          <template v-for="item in movie">
            <!-- {{ this.reying }} -->
            <div class="main-container">
              <div class="movie-item">
                <div class="movie-item-avatar">
                  <img :src="item.cover" >
                </div>
                <div class="movie-item-content-wrapper">
                    <div class="content">
                        <div class="title">{{ item.title }}</div>
                        <div class="line-ellipsis">{{ item.type }}</div>
                        <div class="line-ellipsis">主演: {{ item.star_actor }}</div>
                    </div>
                    <div class="score-wrapper">
                      <div class="score">{{ item.score }}</div>
                    </div>
                </div>
              </div>  
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
   
  </div>
</template>

<script>
import httpApi from '@/http';


  export default {
    data() {
      return {
        // cateid:'',
        type: {
          cateid:'',
          typename:''
        },
        reying:'',
        movie:'',
      }
    },

    methods: {

      onClick(name){
        let params = {cateid:Number(name),page:1,pagesize:100}
        httpApi.movieApi.queryById(params).then(res=>{
          this.movie = res.data.data.result
          console.log('dainji',res)
        })
      },

      getType() {
        httpApi.movieApi.queryTypes().then(res=>{
          this.type = res.data.data
          this.cateid =res.data.data.cateid
          console.log('类型结果：',res)
          console.log('类别id：',res.data.data.cateid)
        })
      },

      getMovie(){
        // let cateid =this.type.cateid
        let params = { cateid:1, page: 1, pagesize: 100}
        httpApi.movieApi.queryById(params).then(res=>{
          this.movie = res.data.data.result
          console.log('电影信息：',this.movie)
          
        }
      )},

    },

    mounted () {
      this.getType()
      this.getMovie()
      this.getCategoryId()
      console.log('类型id:',this.type.cateid)
      console.log('类型id11111:',this.cateid)
    },
  }
</script>

<style lang="scss" scoped>
/* 主要区域 */
.main-container{
  background-color: #fff;
}
/* 影片信息 */
.movie-item{
  margin:0 10px;
  background-color: #fff;
  border-bottom:1px solid #e5e5e5;
}
/* 影片图片容器 */
.movie-item .movie-item-avatar{
  width: 64px;
  height: 90px;
  position: relative;
  margin-top: 12px;
  float: left;
}
.movie-item .movie-item-avatar img{
  width: 100%;
  height: 90px;
  border-radius: 2px;
}
/* 影片内容容器 */
.movie-item .movie-item-content-wrapper{
  padding: 12px 14px 12px 0;
  margin-left: 80px;
  height: 90px;
  max-height: 90px;
  position: relative;
}
.movie-item .movie-item-content-wrapper .content{
  padding-right: 5px;
  margin-right: 58px;
  overflow: hidden;
}
.movie-item .movie-item-content-wrapper .content .title{
  max-height: 26px;
  margin-bottom: 7px;
  line-height: 26px;
  font-size: 17px;
  color: #333;
  overflow: hidden;
}
.movie-item .movie-item-content-wrapper .content .line-ellipsis{
  margin-top: 15px;
  line-height: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  color: #666;
}
.movie-item .movie-item-content-wrapper .score-wrapper{
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 13px;
  height: 27px;
  margin: auto;
}
.movie-item .movie-item-content-wrapper .score{
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
  background-color: #f03d37;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  cursor: pointer;
}

</style>